<script setup>
const activeIndex = ref(0);
const onChange = (e) => {
    console.log(e.detail.current);
    activeIndex.value = e.detail.current;
};
</script>

<template>
    <view class="carousel">
        <swiper :circular="true" :autoplay="true" :interval="3000" :duration="1000" @change="onChange">
            <swiper-item>
                <!-- src="https://img60.ddimg.cn/2024/7/1/202470110585710730.jpg" -->
                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="imge" src="@/static/temp/banner1.jpg"></image>
                </navigator>
            </swiper-item>
            <swiper-item>
                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="imge" src="@/static/temp/banner2.jpg"></image>
                </navigator>
            </swiper-item>
            <swiper-item>
                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="imge" src="@/static/temp/banner3.jpg"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
            <text v-for="(item, index) in 3" :key="item" class="dot" :class="{ active: index === activeIndex }"></text>
        </view>
    </view>
</template>

<style lang="scss">
.carousel {
    position: relative;
    overflow: hidden;
    transform: translate(0);
    background-color: #efefef;
    //     指示点
    .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16rpx;
        display: flex;
        justify-content: center;
        .dot {
            width: 30rpx;
            height: 6rpx;
            margin: 0 8rpx;
            border-radius: 6rpx;
            background-color: rgba(255, 255, 255, 0.4);
        }
        .active {
            background-color: #fff;
        }
    }
    .navigator.image {
        width: 100%;
        height: 100%;
    }
}
</style>
